<template>
	<view class="container">
		<view class="page-content">
			<view class="scroll-list-box">
				<uv-scroll-list :indicator="false">
					<view class="item-box" v-for="(item, index) in list" :key="index" @click="onClickList(index)">
						<text :class="['item-text',index==current?'item-text-act':'']">{{item.title}}</text>
					</view>
				</uv-scroll-list>
			</view>
			<view class="">
				<unicloud-db ref="udb" @load="onLoadData" :where="where" collection="opendb-news-articles"
					field="title,url" page-data="add" :page-size="options.pageSize" :page-current="options.pageCurrent"
					:getcount="true" orderby="last_modify_date desc"
					v-slot:default="{data, loading, hasMore,error, options}" :options="options">
					<uv-list>
						<uv-list-item v-for="(item,index) in data" :key="item._id" :title="item.title[locaLang]"
							show-arrow clickable @click="toArticalDetail(item._id)"></uv-list-item>
					</uv-list>
					<!-- 加载更多组件 -->
					<uv-load-more style="margin-top: 30rpx;" :status="loading?'loading':hasMore?'loadmore':'nomore'"
						:loading-text="loadingText" :nomore-text="nomoreText"></uv-load-more>
				</unicloud-db>
			</view>
		</view>
		<view class="">
			<ap126-footer></ap126-footer>
		</view>
	</view>
</template>

<script>
	// 分页配置
	const pageSize = 15
	const pageCurrent = 1
	import message from './i18n/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	export default {
		data() {
			return {
				options: {
					pageSize,
					pageCurrent,
					// ...enumConverter
				},
				category_id: '6713740e6e5d2d42f9684960',
				current: 0,
				数据发布: {
					en: 'Data Release',
					ru: 'Публикация Данных',
					kk: 'Деректер Жариялау',
					"zh-Hans": "数据发布"
				},
			}
		},
		computed: {
			locaLang() {
				return uni.getLocale()
			},
			where() {
				return {
					category_id: this.category_id
				}
			},
			$w() {
				return $w
			},
			list() {
				return [{
					title: this.$w('产销')
				}, {
					title: this.$w('进出口')
				}]
			},
			loadingText() {
				return this.$w('数据加载中') + '...'
			},
			nomoreText() {
				return this.$w('没有数据了')
			}
		},
		onReachBottom() {
			// console.log('123');
			// this.loadStatus = 'loading';
			this.$refs.udb.loadMore()
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: this.数据发布[this.locaLang]
			})
			if (e.i) {
				this.current = e.i * 1
				if (this.current == 0) {
					this.category_id = '6713740e6e5d2d42f9684960'
				}
				if (this.current == 1) {
					this.category_id = '6714b6e40d2b31998c8ead2b'
				}
				// console.log('onLoad',e.i);
			}
		},
		methods: {
			onClickList(index) {
				this.current = index
				switch (true) {
					case this.current === 0:
						this.category_id = '6713740e6e5d2d42f9684960'
						break;
					case this.current === 1:
						this.category_id = '6714b6e40d2b31998c8ead2b'
						break;
					default:
						this.category_id = '6713740e6e5d2d42f9684960'
						break;
				}
			},
			onLoadData(e) {
				// console.log(e);
			},
			toArticalDetail(id) {
				uni.navigateTo({
					url: `./publish-article-detail?id=${id}&i=${this.current}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toArticalPage(url) {
				uni.navigateTo({
					url: './artical-url-page?url=' + url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toArticalPage_2(url) {
				// #ifdef H5
				window.open(url, "_blank")
				// #endif
				// #ifdef APP
				uni.navigateTo({
					url: './artical-url-page?url=' + url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.container {
		max-width: 800px;
		height: 100vh;
		/* 设置最大宽度 */
		margin: 0 auto;
		/* 居中显示 */
		// padding: 20px;
		/* 添加内边距（可选） */
		background-color: #eee;
	}
	.page-content{
		min-height: 70vh;
	}

	.scroll-list-box {
		width: 100%;
		display: flex;
		justify-content: center;
		// padding: 20px 0;
		background-color: #fff;

		.item-box {
			margin: 20px;
		}

		.item-text {
			font-size: 36rpx;
			color: #555;
			cursor: pointer;
		}

		.item-text-act {
			color: mediumblue;
		}
	}
</style>